
<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急资源 救援队伍弹窗
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <div class="Rescue_team_Popup">
      <div class="close_box" @click="close">
        <img src="../../assets/images/close_btn2.png" v-if="this.theme==='dark'"/>
        <Icon type="ios-close" style="color:#0398FF;font-size:16px;font-weight:600" v-else/>
      </div>
      <div class="popCent">
        <div class="input_box" style="margin-top:0;">
          <div class="input_label">队伍名称</div>
          <div class="input_bj">
            <input type="text" v-model="detail.teamName" disabled />
          </div>
        </div>
        <div class="input_box" style="margin-top:15px;">
          <div class="input_label">队伍级别</div>
          <div class="input_bj">
            <input type="text" v-model="detail.level" disabled />
          </div>
        </div>
        <div class="input_box" style="margin-top:15px;">
          <div class="input_label">队伍人数</div>
          <div class="input_bj">
            <input type="text" v-model="detail.number" disabled />
          </div>
        </div>
        <div class="input_box" style="margin-top:15px;">
          <div class="input_label">负责人</div>
          <div class="input_bj">
            <input type="text" v-model="detail.responsiblePeople" disabled />
          </div>
        </div>
        <div class="input_box" style="margin-top:15px;">
          <div class="input_label">联络人</div>
          <div class="input_bj">
            <input type="text" v-model="detail.linkman" disabled />
          </div>
        </div>
        <div class="input_box" style="margin-top:15px;">
          <div class="input_label">联系电话</div>
          <div class="input_bj">
            <input type="text" v-model="detail.phone" disabled />
          </div>
        </div>
        <!-- 物资储备数量 -->
        <div>
          <div class="material_title">物资储备数量</div>
          <div class="material_box_bj">
            <div class="container">
              <table cellspacing="0">
                <thead>
                  <tr>
                    <th>名称</th>
                    <th>型号规格</th>
                    <th>数量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in detail.suppliesList" :key="index">
                    <td>{{item.suppliesName}}</td>
                    <td>{{item.specification}}</td>
                    <td>{{item.quantity}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import { getRescueTeamDetail } from '@/api/index'
import { mapState } from 'vuex'
export default {
  props: {
    attr: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      detail: {}
    }
  },
  watch: {
    attr: {
      handler () {
        this.getDetail()
      },
      deep: true
    }
  },
  mounted () {
    this.getDetail()
  },
  computed: {
    ...mapState(['theme'])
  },
  methods: {
    close () {
      this.$emit('closePop')
    },
    getDetail () {
      const params = {
        id: this.attr.id
      }
      getRescueTeamDetail(params).then(res => {
        if (res.code === 200) {
          this.detail = res.result
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.Rescue_team_Popup {
    width: 100%;
    @include themify($themes) {
      background-image:themed('yjzy_tk_bg');
      background-size: 100% 100%;
      background: themed('yjzy_tk_bg_color');
      box-shadow: themed('yjzy_tk_box_shadow');
    }
    // box-sizing: border-box;
    // padding-left: 40px;
    z-index: 99;
}
.popCent{
    width: 100%;
    padding: 0 15px 15px;
    box-sizing: border-box;
}
.close_box {
  height:35px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  // padding-right:1.25rem /* 20/16 */;
  text-align: right;
  cursor: pointer;
}
.input_box {
    width: 100%;
    height: 30px;
    display: flex;
    margin-top: 15px;
}
.input_label {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 600;
    @include themify($themes) {
      color:themed('yjzy_tk_title_color')
    }
    // color: #6CEBED;
    line-height: 26px;
    // opacity: 0.5;
    width: 74px;
    margin-left: 16px;
    margin-right: 14px;
}
.input_bj {
    width: 210px;
    height: 30px;
    @include themify($themes) {
      background-image:themed('yjzy_tk_bg_input');
      // background-image: url('../../assets/images/input_bj1.png');
      background: themed('yjzy_tk_bg_input_color');
    }
    background-size: 210px 30px;
}
.input_bj2 {
    width: 210px;
    height: 30px;
    background-image: url('../../assets/images/input_bj2.png');
    background-size: 210px 30px;
}
.input_bj input,
.input_bj2 input {
    background: none;
    border: none;
    outline: none;
    width:100%;
    margin-left:10px;
    margin-top:5px;
    line-height:23px;
    @include themify($themes) {
      color:themed('yjzy_tk_input_color');
    }
}
.material_title {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 600;
    @include themify($themes) {
      color:themed('yjzy_tk_title_color');
    }
    line-height: 24px;
    margin-top: 16px;
    // opacity: 0.5;
}
.material_box_bj {
    width: 310px;
    height: 180px;
    // background-image: url('../../assets/images/wzbj.png');
    @include themify($themes) {
      background-image:themed('yjzy_tk_table_bg');
      background: themed('yjzy_tk_table_bg_color');
    }
    background-size: cover;
    margin: 0 auto;
    position: relative;
    margin-top: 10px;
}
.Scheduled_materials {
    width: 310px;
    height: 180px;
    background-image: url('../../assets/images/tab_bj2.png');
    // background-size:310px 180px;
    background-size: cover;
    margin: 0 auto;
    position: relative;
    margin-top: 10px;
}
.container {
    width: 96%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // margin-left:7px;
    // background-color: #2C3A5B;
}

.container table {
    color: #e6e6e6;
    font-size: 14px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.conatiner table thead,
tbody,
tr,
th,
td {
    display: inline-block;
}

.container table thead {
    width: 100%;
    height: 40px;
    line-height: 40px;
    @include themify($themes) {
      color: themed('yjzy_tk_table_color');
    }
    // opacity: 0.5;
    // color: #6CEBED;
}

.container table thead tr {
    width: 100%;
    // border-bottom: 1px solid #CCC;
    box-sizing: border-box;
}

.Rescue_team_Popup .container table thead tr th:nth-of-type(1) {
    width: 100px;
}
.Rescue_team_Popup .container table thead tr th:nth-of-type(2) {
    width: 100px;
}
.Rescue_team_Popup .container table thead tr th:nth-of-type(3) {
    width: 85.66px;
}
.Rescue_team_Popup .container table thead tr th:nth-of-type(4) {
    width: 74.25px;
}
.Rescue_team_Popup .container table tbody {
    width: 100%;
    max-height: 132px;
    overflow-y: auto;
}

.container table tbody tr {
    width: 100%;
    line-height: 40px;
    // border-bottom: 1px solid #CCCCCC;
    box-sizing: border-box;
    @include themify($themes) {
      color:themed('yjzy_tk_table_thColor');
    }
}

.container table tbody tr:nth-last-of-type(1) {
    border-bottom: none;
}

.container table tbody tr td {
    text-align: center;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(1) {
    width: 100px;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(2) {
    width: 100px;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(3) {
    width: 85.66px;
}

// 滚动条整体部分
.Rescue_team_Popup .container table tbody::-webkit-scrollbar {
  width: 4px;
}
//滚动条里面的滑块
.Rescue_team_Popup .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('azd-pop-scrollbar-thumb-color');
  }
}
//滚动条的轨道
.Rescue_team_Popup .container table tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed(' azd-pop-scrollbar-track-color');
  }
}
</style>
